<template>
	<view style="width: 100%;height: 100%;">
		<view class="card-title">作业指导文件</view>
		<view class="report-image">
			<view class="image-content-top">
				<view class="img-content">
					<view class="fileItem" v-for="item in displayedFiles" :key="item.url">

						<u-image class="image" width="450rpx" height="300rpx"
							v-if="getFileType(item.fileName) == 'image'" :src="item.url" mode="aspectFill"
							@click="previewImage(item)" />

						<view class="pdfs" v-else>
							<u-image width="250rpx" height="260rpx" src="/static/images/pdf.jpg" mode="aspectFill"
								@click="previewPdf(item)" />
							<view>{{item.fileName}}</view>
						</view>

					</view>
					<uni-icons @click="scrollLeft" type="arrow-left" size="35" class="left-arrow"
						v-if="showLeftArrow"></uni-icons>
					<uni-icons @click="scrollRight" type="arrow-right" size="35" class="right-arrow"
						v-if="showRightArrow"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ImgList',
		props: {
			currentProps: {
				typeof: String,
				default: ''
			}
		},
		computed: {
			showLeftArrow() {
				return this.currentPage > 0;
			},
			showRightArrow() {
				return (this.currentPage + 1) * this.itemsPerPage < this.data_infos2.length;
			},
			displayedFiles() {
				const start = this.currentPage * this.itemsPerPage;
				const end = start + this.itemsPerPage;
				console.log('处理后的文件', this.data_infos2.slice(start, end))
				return this.data_infos2.slice(start, end);

			},
		},

		data() {
			return {
				itemsPerPage: 4, // 每页显示的文件数量
				currentPage: 0,

				data_infos2: []
			}
		},
		created() {
			this.getRouteRequestByBomId()
			console.log('imglist的created方法', this.currentProps)
		},
		methods: {
			// 获取工艺的详细信息
			getRouteRequestByBomId() {
				console.log('作业指导书', this.currentProps)
				this.data_infos2 = [];
				if (this.currentProps && this.currentProps != '') {
					this.$u.api.getRouteRequestByBomId(this.currentProps).then(res => {
						console.log('获取工艺的详细信息', res)
						if (res.code == 200) {

							let arr2 = res.data.find(item => item.totel == "作业指导书")
							this.bomList = arr2.date
							this.data_infos2 = arr2.date;

						}
					});
				}

			},
			getFileType(fileName) {
				const fileExtension = fileName.split('.').pop().toLowerCase();
				if (fileExtension === 'jpg' || fileExtension === 'jpeg' || fileExtension === 'png' || fileExtension ===
					'gif' || fileExtension === 'bmp') {
					return 'image';
				} else if (fileExtension === 'pdf') {
					return 'pdf';
				} else {
					return 'unknown'; // 未知文件类型
				}
			},
			scrollLeft() {
				if (this.currentPage > 0) {
					this.currentPage -= 1;
				}

			},
			scrollRight() {
				if ((this.currentPage + 1) * this.itemsPerPage < this.data_infos2.length) {
					this.currentPage += 1;
				}
			},

			previewImage(item) {
				// 处理预览图片的逻辑，可以使用模态框或其他方式显示大图
				// 示例：打开模态框并显示图片
				uni.previewImage({
					urls: [item.url], // 图片数组，多张图片预览时传入数组
				});
			},
			previewPdf(item) {
				// 首先，通常需要先下载文件（如果是网络资源）
				uni.downloadFile({
					url: item.url, // 替换为你的文件URL
					success: (res) => {
						if (res.statusCode === 200) {
							const tempFilePath = res.tempFilePath;
							// 然后使用 uni.openDocument 打开
							uni.openDocument({
								filePath: tempFilePath,
								fileType: 'pdf', // 可根据文件类型指定，非必填，但建议提供
								success: function(res) {
									console.log('打开文档成功');
								},
								fail: function(err) {
									console.log('打开文档失败', err);
									uni.showToast({
										title: '打开文件失败',
										icon: 'none'
									});
								}
							});
						}
					},
					fail: (err) => {
						console.log('下载文件失败', err);
						uni.showToast({
							title: '下载文件失败',
							icon: 'none'
						});
					}
				});

			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .card-title {
		line-height: 30px;
		position: relative;
		padding-left: 20px;
		font-size: 14px;
		font-weight: 600;
		font-style: italic;
		color: #ffaa00;
		border-bottom: 1px solid #e4e7ed;
	}

	.report-image {
		width: 100%;

		height: 100%;

		position: relative;


		.image-content-top {
			width: 100%;

			height: 100%;


			.img-content {
				height: 100%;
				width: 100%;
				display: flex;
				overflow-x: hidden;
				flex-wrap: nowrap;
				background: transparent;
				justify-content: center;



				.fileItem {
					width: 100%;
					/* 每项占据容器20%宽度 */
					height: 100%;
					/* 高度与容器高度一样 */
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;

					.image {
						margin-left: 5px;
					}

					.pdfs {
						width: 300rpx;
						height: 300rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						color: #000;
						margin-left: 5px;
						border-radius: 10px;
						border: 3px solid #3c3c3c;
						font-size: 40rpx;

					}
				}

				.left-arrow,
				.right-arrow {
					/* 你的箭头样式 */
					position: absolute;
					top: 30%;
					width: 50px;
					height: 50px;

					// transform: translateY(-50%);
					background: #ccc;
					color: #000;
					// font-size: 50px;
					border: none;
					cursor: pointer;
					padding: 5px;
					border-radius: 50%;
					z-index: 100;
				}

				.left-arrow {
					left: 10px;
				}

				.right-arrow {
					right: 10px;
				}
			}
		}

	}
</style>